$(() => {
    // 文章类别显示
    function getList() {
        $.ajax({
            type: 'GET',      //请求方法
            url: 'http://localhost:8080/api/v1/admin/category/list',       //请求地址
            headers: {
                Authorization: localStorage.getItem('dsj_token')
            },
            success: (res) => {
                console.log('请求成功后执行', res)
                const htmlStr = template('moban', res)
                $('.category_table tbody').html(htmlStr)
            }
        })
    }
    getList()

    // 新增类别
    $('.btn_opt').on('click', () => {
        // 获取用户输入的内容
        const name = $('#name').val().trim()
        const slug = $('#slug').val().trim()
        // 非空判断
        if (name === '' || slug === '') return alert('请重新输入')
        $.ajax({
            type: 'POST',      //请求方法
            url: 'http://localhost:8080/api/v1/admin/category/add',       //请求地址
            data: { name, slug },
            //请求参数
            headers: {
                Authorization: localStorage.getItem('dsj_token')
            },
            success: (res) => {
                console.log('请求成功后执行', res)
                // 情况1：成功
                if (res.code === 200) {
                    // 1.页面重新渲染
                    getList()
                    // 2.关闭模态框
                    $('#myModal').modal('hide')
                    // 3.清空两个输入框
                    $('#name').val('')
                    $('#slug').val('')
                }
                // 情况2：失败
                else {
                    alert(res.msg)
                }
            }
        })
    })

    // 模态框编辑
    // 3.1打开编辑模态框
    let id = 0
    $('tbody').on('click', '.edit_btn', function () {
        $('#editModal').modal('show')
        // 获取按钮自己的id
        id = $(this).data('id')
        $.ajax({
            type: 'GET',      //请求方法
            url: 'http://localhost:8080/api/v1/admin/category/search',       //请求地址
            data: { id },      //请求参数
            headers: {
                Authorization: localStorage.getItem('dsj_token')
            },
            success: (res) => {
                console.log('请求成功后执行', res)
                // 渲染数据类别 点击模态框显示内容
                let obj = res.data[0]
                $('#edit_name').val(obj.name)
                $('#edit_slug').val(obj.slug)
            }
        })
    })

    // 3.2 完成编辑
    $('#editModal .btn_edit').on('click', function () {
        // 获取输入框内容
        const name = $('#edit_name').val().trim()
        const slug = $('#edit_slug').val().trim()
        // 非空判断
        if (name === '' || slug === '') return alert('请重新输入')
        $.ajax({
            type: 'POST',      //请求方法
            url: 'http://localhost:8080/api/v1/admin/category/edit',       //请求地址
            data: { id, name, slug },  //请求参数
            headers: {
                Authorization: localStorage.getItem('dsj_token')
            },
            success: (res) => {
                console.log('请求成功后执行', res)
                if (res.code === 200) {
                    // 重新渲染
                    getList()
                } else {
                    alert(res.msg)
                }
            }
        })

    })

    // 业务4  删除类别
    $('tbody').on('click', '.btn_del', function () {

        // 点击删除弹出 提示 让用户二次确认是否删除
        layer.confirm('是否删除?', { icon: 3, title: '温馨提示' },
            (index) => {
                // 获取id
                const id = $(this).data('id')
                $.ajax({
                    type: 'POST',      //请求方法
                    url: 'http://localhost:8080/api/v1/admin/category/delete',       //请求地址
                    data: { id },      //请求参数
                    headers: {
                        Authorization: localStorage.getItem('dsj_token')
                    },
                    success: (res) => {
                        getList()
                        console.log('请求成功后执行', res)
                    }
                })

                layer.close(index);
            });
    })
})
